import { StyleSheet } from 'react-native';
import { APP_BLACK } from '../../../../constant/color';
import { phonePx } from '../../../../util/adapt';
import { CARD_WIDTH, MARGIN_TOP } from '../../constant';

export default StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    top: MARGIN_TOP,
    width: CARD_WIDTH,
    alignItems: 'center'
  },
  shadowContainer: {},
  content: {
    borderRadius: phonePx(8),
    backgroundColor: '#ffffff'
  },
  shadow: {
    position: 'absolute',
    left: 0,
    top: 0,
    shadowColor: 'rgba(173, 173, 173, 0.48)',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 4,
    shadowRadius: 4,
    marginTop: phonePx(8)
  },
  shadowContent: {
    minHeight: phonePx(49),
    minWidth: phonePx(187),
    maxWidth: phonePx(416),
    marginTop: phonePx(8),
    paddingTop: phonePx(8),
    paddingBottom: phonePx(8),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  haveProblem: {
    width: phonePx(416)
  },
  leftContent: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  name: {
    color: '#3C96FA'
  },
  problem: {
    maxWidth: phonePx(145),
    fontSize: phonePx(12),
    lineHeight: phonePx(18),
    color: APP_BLACK,
    marginLeft: phonePx(8)
  },
  rightContent: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  timeContent: {
    width: phonePx(24),
    height: phonePx(29),
    marginLeft: phonePx(10),
    alignItems: 'center'
  },
  timeIcon: {
    position: 'absolute',
    width: phonePx(24),
    height: phonePx(29),
    marginLeft: phonePx(10)
  },
  timeDesc: {
    marginTop: phonePx(9),
    fontWeight: '600',
    fontSize: phonePx(10),
    lineHeight: phonePx(14)
  },
  answerDesc: {
    color: '#FFFFFF',
    fontSize: phonePx(10),
    fontWeight: '500',
    lineHeight: phonePx(14)
  },
  answer: {
    minWidth: phonePx(55),
    maxWidth: phonePx(176),
    borderRadius: phonePx(20),
    backgroundColor: '#F0F0F0',
    paddingLeft: phonePx(14),
    paddingRight: phonePx(14),
    paddingTop: phonePx(8),
    paddingBottom: phonePx(8)
  },
  haveProblemAnswer: {
    maxWidth: phonePx(100)
  },
  correctAnswer: {
    backgroundColor: '#3BD180',
    borderWidth: 0
  },
  wrongAnswer: {
    backgroundColor: '#FC6C50',
    borderWidth: 0
  },
  selectedAnswer: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'transparent',
    borderWidth: phonePx(1),
    borderColor: APP_BLACK,
    borderRadius: phonePx(20)
  },
  rightAnswer: {
    backgroundColor: '#F0F0F0',
    marginLeft: phonePx(12),
    marginRight: phonePx(11)
  },
  blackDesc: {
    color: APP_BLACK
  },
  doProblem: {
    marginTop: phonePx(10),
    height: phonePx(36),
    borderRadius: phonePx(20),
    backgroundColor: '#ffffff',
    shadowColor: 'rgba(182, 190, 207, 0.4)',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 4,
    shadowRadius: 4,
    paddingHorizontal: phonePx(20),
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 3
  },
  desc: {
    color: '#3E3E3E',
    fontSize: phonePx(12)
  }
});
